<template>
  <div>
    <a-card :bordered='false'>
      <!--  #####################操作###################  -->
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter="48">
            <a-col :md='8' :sm='24'>
              <a-form-item label='使用状态'>
                <a-select  placeholder='使用状态' v-model='queryParam.status' allowClear>
                  <a-select-option value='-1'>未支付</a-select-option>
                  <a-select-option value='0'>未领取</a-select-option>
                  <a-select-option value='1'>未使用</a-select-option>
                  <a-select-option value='2'>已使用</a-select-option>
                  <a-select-option value='3'>已过期</a-select-option>
                  <a-select-option value='4'>已退款</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md='!advanced && 8 || 24' :sm='24'>
                <span class='table-page-search-submitButtons'
                      :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button v-action:query type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
                  <a-button style='margin-left: 8px' @click="clearData()">重置</a-button>
                </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!--  #####################表格###################  -->
      <s-table ref='table' :columns='columns' :data='loadData'>
        <a-tag slot='status' slot-scope='text' :color='text | statusColorFilter'>
          {{ text | statusFilter }}
        </a-tag>
        <span slot='action' slot-scope='text, record'>
          <template>
            <a v-if='record.status == 1' @click='useCoupon(record)'>已使用</a>
          </template>
        </span>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { STable } from '@/components'
import { selectPage,useCoupon } from '@/api/member/memberProduct'

/**
 * 组件
 */
const components = { STable }

const columns = [
  {
    title: '券名称',
    dataIndex: 'productName',
    width: 150
  },
  {
    title: '券批次号',
    dataIndex: 'productNo'
  },
  {
    title: '券编号',
    dataIndex: 'couponCode'
  },
  {
    title: '领取人',
    dataIndex: 'nickName'
  },
  {
    title: '核销状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '核销人',
    dataIndex: 'writeOffUserName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: {
      customRender: 'action'
    }
  }
]

const statusMap = {
  '-1': {
    status: '#f50',
    text: '未支付'
  },
  0: {
    status: '#f50',
    text: '未领取'
  },
  1: {
    status: '#108ee9',
    text: '未使用'
  },
  2: {
    status: '#108ee9',
    text: '已使用'
  }
  ,
  3: {
    status: '#108ee9',
    text: '已过期'
  }
  ,
  4: {
    status: '#108ee9',
    text: '已退款'
  }
}

/**
 * 数据
 */
const data = function() {
  return {
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {
      memberId: null,
      status: null
    },
    columns,
    loading: false,
    editProps: [],
    // customers: [],
    storeCode: null,
    productId: null,
    // 加载数据方法 必须为 Promise 对象
    loadData: parameter => {
      return selectPage(Object.assign(parameter, this.queryParam)).then(res => {
        return res.data
      })
    }
  }
}

const created = function() {
  this.queryParam.memberId = this.$route.query.memberId
  console.log(this.queryParam.memberId);
}

/**
 * 过滤器
 */
const filters = {
  statusFilter(status) {
    return statusMap[status].text
  },
  statusColorFilter(status) {
    return statusMap[status].status
  }
}

/**
 * 计算属性
 */
const computed = {}

/**
 * 侦听器
 */
const watch = {}

export default {
  name: 'merCouponList',
  data: data,
  components: components,
  created: created,
  filters: filters,
  computed: computed,
  watch: watch,
  /**
   * 方法
   */
  methods: {
    handleAdd() {
      this.$refs.createModal.add(this.productId)
    },
    refresh() {
      this.$refs.table.refresh()
    },
    useCoupon(record) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `确认核销吗?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          useCoupon(record.id).then(res=>{
            if (res.code == 200) {
                _this.$message.info("核销成功")
                _this.$refs.table.refresh()
              }
          })
        }
      })
    },
    clearData() {
      this.queryParam.status = null
    }
  }
}
</script>

<style scoped>

</style>
